<template>
           <div>
             <div class="m-subnav">
             <div class="wrap clearfix bg1">
                <ul class="nav">
                  <li>
                 
                    <router-link to="/discover"> <em  :class="1 == flag_num?'z-slt':''">推荐</em></router-link>
                  </li>
                  <li>
                
                     <router-link to="/discover/toplist"><em :class="2 == flag_num?'z-slt':''">排行榜</em></router-link>
                  </li>
                   <li>
                   
                    <router-link to="/discover/playlist"> <em :class="3 == flag_num?'z-slt':''">歌单
                        <span class="f-pa"></span>
                      </em></router-link>
                  </li>
                   <li>
                     <a href="javascript:;">
                      <em >主播电台</em>
                    </a>
                  </li>
                   <li>
                     <a href="javascript:;">
                      <em >歌手</em>
                    </a>
                  </li>
                   <li>
                     <a href="javascript:;">
                      <em >新碟上架</em>
                    </a>
                  </li>
                </ul>

             </div>
          </div>
          <router-view></router-view>
          </div>
        
</template>

<script>
export default {
         name:'OptionNav',
         data(){
          return {
               flag_num:1
          }
         },
         watch:{
           $route(){
                 switch (this.$route.path) {
                   case '/':
                     this.flag_num = 1;
                     break;
                   case '/discover':
                     this.flag_num = 1;
                     break; 
                    case '/discover/playlist':
                     this.flag_num = 3;
                     break;  
                      case '/discover/toplist':
                     this.flag_num = 2;
                     break;     

                 
                   default:
                     break;
                 }
           }
         }

}
</script>

<style lang="less" scoped>
  .m-subnav {
       width: 100%;
       height: 35px;
       background-color: #c20c0c;
       border-bottom:1px solid #a40011 ;
       box-sizing: border-box;
     }
     .bg1 {
       background-color: #c20c0c;
     }
    .nav {
      float: left;
      padding-left: 180px;
      
      li {
        float: left;
        height: 34px;
        text-align: center;
        a {
            color: #fff;
            em {
              position: relative;
          display: inline-block;
          height: 20px;
          padding: 0 13px;
          margin: 7px 17px 0;
          border-radius:20px;
          line-height: 21px;

        }
        }
        
      }
    }
    .z-slt {
      background: #9b0909;
    }
    .f-pa {
      position: absolute;
      display: inline-block;
      width: 8px;
      height: 8px;
      top: 2px;
      background: url(../images/xiazai.png);
      background-size: 8px 8px;
    }
</style>